<!--
 * @Author: zhangyang
 * @Date: 2022-03-02 18:22:39
 * @LastEditTime: 2022-03-07 16:47:15
 * @Description: 头部组件
-->
<script lang="ts" setup>
import { useNavStore, isCollapse, TopIndex } from '@/stores';
import SideSwitch from './SideSwitch';
import User from './User';
import type { NavArrItem } from '@/typings/type';
import type { MenuOption } from 'naive-ui';
import type { Ref } from 'vue';
const { NavArr, LeftNav } = storeToRefs(useNavStore());
const options = computed(() => NavArr.value.filter((item) => item.is_show === 1)) as unknown as Ref<MenuOption[]>;

const menuChange = (key: string, item: MenuOption) => {
  LeftNav.value = (item as NavArrItem)?.part?.slice() ?? [];
};
</script>
<template>
  <div class="flex items-center">
    <SideSwitch v-model="isCollapse" />
    <NMenu
      v-model:value="TopIndex"
      mode="horizontal"
      key-field="autoid"
      label-field="node_name"
      :options="options"
      @update-value="menuChange"
    />
    <User class="absolute right-0" />
  </div>
</template>